import React, { memo } from "react";
import { AskUserInfoWrapper } from "./style";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { Avatar } from "antd";
import { UserOutlined } from "@ant-design/icons";

export default memo(function AskUserInfo() {
  let { userDetail } = useSelector(
    (state) => ({
      userDetail: state.getIn(["public", "userDetail"]),
    }),
    shallowEqual
  );
  return (
    <AskUserInfoWrapper>
      <div className="user-info">
        {Object.values(userDetail).length > 0 ? (
          <div>
            <div className="user-name">
              <Avatar className="avatar" size={42} src={userDetail.avatarUrl} />
              <div className="name">{userDetail.nick}</div>
            </div>
            <div className="other-info">
              <div>
                <div>瞬间</div>
                <div>0</div>
              </div>
              <div>
                <div>圈子</div>
                <div>0</div>
              </div>
              <div>
                <div>关注</div>
                <div>0</div>
              </div>
              <div>
                <div>粉丝</div>
                <div>0</div>
              </div>
            </div>
          </div>
        ) : (
          <div>
            <div className="user-name">
              <Avatar className="avatar" size={42} icon={<UserOutlined />} />
              <div  className="name">未登录!</div>
            </div>

            <div className="other-info">
              <div>
                <div>瞬间</div>
                <div>*</div>
              </div>
              <div>
                <div>圈子</div>
                <div>*</div>
              </div>
              <div>
                <div>关注</div>
                <div>*</div>
              </div>
              <div>
                <div>粉丝</div>
                <div>*</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </AskUserInfoWrapper>
  );
});
